<!--户籍所在地详细地址||家庭住址||家庭住址详细地址-->
<template>
  <div>
    <!--      户籍所在地详细地址-->
    <van-cell required title="户籍详细地址"/>
    <van-field
      v-model="native_addr_desc"
      name="native_addr_desc"
      placeholder="例如：牌楼街道玉龙小区"
      clearable
      :rules="[{ required: true, message: '请填写您的户籍详细地址' }]"
    />
    <!--家庭住址-->
    <van-cell required title="家庭住址"/>
    <van-field
      is-link
      readonly
      clickable
      name="home_addr"
      :value="value"
      placeholder="点击选择省市区"
      @click="showArea = true"
    />
    <van-popup v-model="showArea" position="bottom" round>
      <van-area
        :area-list="areaList"
        @confirm="onConfirm"
        @cancel="showArea = false"
      />
    </van-popup>
    <!--      家庭详细地址-->
    <van-cell required title="家庭详细地址"/>
    <van-field
      v-model="home_addr_desc"
      name="native_addr_desc"
      placeholder="例如：牌楼街道玉龙小区"
      clearable
      :rules="[{ required: true, message: '请填写您的家庭详细地址' }]"
    />
  </div>
</template>

<script>
import area from '@/assets/js/area.js'

export default {
  name: 'content4',
  data () {
    return {
      native_addr_desc: '',
      areaList: { ...area },
      value: '',
      showArea: false,
      home_addr: '',
      home_addr_desc: ''
    }
  },
  methods: {
    onConfirm (values) {
      this.value = values.map((item) => item.name).join('/')
      this.showArea = false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
